<script lang="ts" setup>
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import dayjs from "dayjs";
import * as echarts from "echarts";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
const chartRef = ref();
const queryParams = ref({
  area: "lotio",
  timeRange: []
});
const areaList = ref([
  { name: "lotio", code: "lotio" },
  { name: "mdx", code: "mdx" },
  { name: "PVD", code: "  pvd" }
]);
// 查询列表
const queryTable = async () => {
  nextTick(() => {
    initChart();
  });
};
// 重置筛选条件和列表
const resetTable = async () => {
  const { startTime, endTime } = getTimeRange(30);
  queryParams.value = {
    area: "lotio",
    timeRange: [startTime, endTime]
  };
  queryTable();
};
const getTimeRange = (day = 1) => {
  let now = new Date();
  let startTime = "";
  let endTime = dayjs().format("YYYY-MM-DD");
  let sevenDaysAgo = new Date(now.getTime() - day * 24 * 60 * 60 * 1000); // 7天 = 24 * 60 * 60 * 1000 毫秒
  startTime = dayjs(sevenDaysAgo).format("YYYY-MM-DD");

  return { startTime, endTime };
};
const handelResize = () => {
  if (echartInstance) {
    echartInstance.resize();
  }
};
onMounted(() => {
  const { startTime, endTime } = getTimeRange(30);
  queryParams.value.timeRange = [startTime, endTime];
  queryTable();
});
onUnmounted(() => {
  window.removeEventListener("resize", handelResize);
});
let echartInstance: any = null;
const chartData = ref({
  aaaaaaaaaaaaaaaaaaaaaaa: 0.6,
  bbbbbbbbbbb: 0.9,
  cccc: 0.7
});
const initChart = () => {
  if (echartInstance) {
    echartInstance?.dispose();
    echartInstance = null;
    window.removeEventListener("resize", handelResize);
  }
  echartInstance = echarts.init(chartRef.value);
  const data = Object.values(chartData.value);

  const option: any = {
    tooltip: {
      show: true,
      borderColor: "#fff",
      backgroundColor: "#fff"
    },
    title: {
      subtext: "CR室内温度相关度"
    },
    xAxis: {
      type: "category",
      data: Object.keys(chartData.value),
      axisLabel: {
        rotate: 20
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    grid: {
      top: "44px",
      left: 0,
      right: 0,
      containLabel: true
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: data,
        type: "bar",
        barWidth: 40,
        barCategoryGap: "5px",
        itemStyle: {
          color: "#4786FF"
        }
      }
    ]
  }; // 动态计算每个柱子顶部横线的位置和长度
  echartInstance.setOption(option);
  window.addEventListener("resize", handelResize);
};
const changeDate = () => {};
</script>
<template>
  <div>
    <div class="card-bg mb-[16px]">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-form-item style="margin-bottom: 0" label="日期" prop="timeRange">
          <px-date-picker
            v-model="queryParams.timeRange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate"
          />
        </px-form-item>
        <div class="area-group mr-[8px]">
          <span> 区域：</span>
          <ul class="area-list">
            <li
              v-for="item in areaList"
              :key="item.code"
              :class="['area', { active: item.code === queryParams.area }]"
              @click="queryParams.area = item.code"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <px-button type="primary" @click="queryTable">查询</px-button>
        <px-button @click="resetTable">重置</px-button>
      </px-form>
    </div>
    <div class="card-bg chart-box">
      <modelTitle title="洁净室温度环境因子关联分析" />
      <div ref="chartRef" class="chart" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.chart-box {
  width: 100%;
  min-height: calc(100vh - 210px);
}

.chart {
  width: 100%;
  height: 606px;
}

.equip-form {
  display: flex;
  align-items: center;
}

.card-bg {
  padding: 16px 24px;
  background: #fff;
  border-radius: 4px;
}

.area-group {
  display: flex;
  align-items: center;
}

.area-list {
  display: flex;
  align-items: center;
}

.area {
  padding: 6px 8px;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: rgb(0 0 0 / 80%);
  cursor: pointer;
  background: #f5f5f5;
  border-radius: 4px;

  &.active {
    font-weight: 500;
    color: #3b82f6;
    background: #daecff;
  }
}
</style>
